<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>邀请好友</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/jiazai.css">
    <style>
        .back {
            position: fixed;
            top: 10px;
            left: 20px;
        }
        
        .invi-content {
            position: relative;
            width: 90%;
            height: auto;
            box-sizing: border-box;
            margin: -80px auto 0;
            padding: 0 22px;
            background: #353742;
            border-bottom: 1px solid transparent;
            border-radius: 20px 20px 0 0;
        }
        
        .invi-title {
            position: relative;
            top: -20px;
            width: 70%;
            height: 40px;
            margin-left: 15%;
            line-height: 40px;
            font-size: 18px;
            color: white;
            text-align: center;
            background: #353742;
            border-radius: 15px;
        }
        
        .invi-code {
            width: 80%;
            margin: auto;
            background: url('./img/invi-bg.png') no-repeat center center;
            background-size: 100% 100%;
        }
        
        .invi-code>h2 {
            font-size: 20px;
            padding: 20px 0 10px;
            text-align: center;
        }
        
        .invi-code>h1 {
            font-size: 30px;
            text-align: center;
            color: #2590FE;
        }
        
        .invi-code>p {
            padding-top: 5px;
            padding-bottom: 15px;
            font-size: 14px;
            text-align: center;
            color: #999;
            border-bottom: 1px dashed #eee;
        }
        
        .qr-img {
            padding: 20px 0 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .input-invi{
        	height: 30px;
        	margin: 15px 0;
        	padding: 8px 20px;
        	background: white;
        	border-radius: 40px;
        }
        .input-invi>span:nth-of-type(1){
        	flex: 0 0 80px;
        	font-size: 16px;
        }
        .input-invi>span:nth-of-type(2){
        	flex: 1 1 0;
        	white-space: nowrap;
        	overflow-x: auto;
        	font-size: 16px;
        	color: #2590fe;
        	 -webkit-overflow-scrolling: touch;
        }
        .input-invi>span:nth-of-type(2)::-webkit-scrollbar{
        	display: none;
        }
        .input-invi>span:nth-of-type(3){
        	flex: 0 0 50px;
        	text-align: right;
        	font-size: 15px;
        	color: #555555;
        }
        .img-invi-qr{
        	margin: 30px 0;
        }
        .sava-btn{
        	margin-bottom: 30px;
        	padding: 20px 0;
        	color: white;
        	background: #2590fe;
        	border-radius: 40px;
        }
    </style>
</head>

<body style="background:#2a2c35;">
    <div id='app'>
        <!-- 加载中动画 -->
        <div id='jiazai-ani' v-if='jiazai'>
            <div class="arc"></div>
            <h1><span>LOADING</span></h1>
        </div>
        <!-- 加载中动画 -->

        <img class='back' @click='_close();' src="./img/left.svg" width="22px" height="22px">

        <img class='invi-bg' src="./img/invi-get.png" width="100%">

        <div class='invi-content'>
            <p class='invi-title'>邀请好友 赚到不停</p>
            <div class="dis-start input-invi">
            	<span>邀请码</span>
            	<span v-text="code">------</span>
            	<span @click="_copy(code);_toast('复制成功');">复制</span>
            </div>
            <div class='dis-start input-invi'>
            	<span>邀请链接</span>
            	<span v-text="downUrl">-------</span>
            	<span @click="_copy(downUrl);_toast('复制成功')">复制</span>
            </div>
            <div class="dis-cen img-invi-qr" id='qr' style="width: 160px;background:transparent;height: 200px;margin: auto;">
	            <!--<img src="./img/qr.png" style="width: 160px;height: 160px;">-->
            </div>
            <div class="dis-cen sava-btn" @click='save' id='save'>
            	保存图片
            </div>
            <!--<div class='invi-code'>
                <h2>邀请码</h2>
                <h1 v-text="JSON.parse(localStorage.getItem('cc_user')).usercode">12345</h1>
                <p>注册时也可填写邀请码</p>
                <div class='qr-img'>
                    <img src="./img/qr.png" width="160px" height="160px">
                </div>
            </div>-->
        </div>

    </div>
    <script src="js/comm.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.qrcode.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/saveImage.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                jiazai: false,
                downUrl:HTTP+'/weblogin.html?code='+JSON.parse(localStorage.getItem('cc_user')).usercode,
                code:JSON.parse(localStorage.getItem('cc_user')).usercode
            },
            mounted: function() {
               	var This=this;
				this.$nextTick(function(){
					setTimeout(function(){						
						This.makeQr(This.downUrl);
					},200);
				});
            },
            methods: {
				makeQr:function(url){
					 $("#qr").html('');
		      		 $("#qr").qrcode({ //设置css
						render: "table", //二维码的生成方式
						width: 150, //生成二维码的宽度
						height:150, //生成二维码的高度
						text:url,
						foreground: "#1D618A",
						background: "#fff",
					    correctLevel :1 //容错级别，默认为2，最高为3，为了让用户扫码最快，容错级别应当设为最低
					});
				},
				//保存图片
				save:function(off){
					plus.nativeUI.showWaiting("正在保存图片中...");
					$('#save').hide();
					setTimeout(function(){
						var element = document.querySelector('#app');
						SaveImage(element, function(path) {
							plus.nativeUI.closeWaiting();
							_toast('保存成功，请前往相册分享！');
							$('#save').show();
						},
						function() {
							
						})
					},300);
					
				}
            }
        });
    </script>
</body>

</html>